<!-- pages/login/login.vue -->
<template>
  <view class="container">
    <!-- 顶部切换标签 -->
    <view class="tabs">
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'login' }" 
        @tap="switchTab('login')"
      >登录</view>
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'register' }" 
        @tap="switchTab('register')"
      >注册</view>
    </view>
    
    <!-- 登录表单 -->
    <view v-if="activeTab === 'login'" class="form-container">
      <view class="form-header">
        <text class="form-title">用户登录</text>
        <text class="form-subtitle">欢迎回来，请登录您的账号</text>
      </view>
      
      <view class="form-group">
        <view class="input-group">
          <text class="input-label">用户名</text>
          <input 
            type="text" 
            v-model="loginForm.username" 
            placeholder="请输入用户名" 
            class="input-field"
          />
        </view>
        
        <view class="input-group">
          <text class="input-label">密码</text>
          <input 
            type="password" 
            v-model="loginForm.password" 
            placeholder="请输入密码" 
            class="input-field"
          />
        </view>
        
        <view class="form-actions">
          <view class="remember-me">
            <checkbox :checked="rememberMe" @tap="toggleRememberMe" color="#A8BF8F" />
            <text>记住我</text>
          </view>
          <text class="forgot-password" @tap="forgotPassword">忘记密码?</text>
        </view>
        
        <button class="submit-btn" @tap="handleLogin">登录</button>
        
        <view class="oauth-options">
          <text class="oauth-title">其他方式登录</text>
          <view class="oauth-icons">
            <view class="oauth-icon">
              <text class="icon">📱</text>
            </view>
            <view class="oauth-icon">
              <text class="icon">💬</text>
            </view>
            <view class="oauth-icon">
              <text class="icon">📧</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 注册表单 -->
    <view v-if="activeTab === 'register'" class="form-container">
      <view class="form-header">
        <text class="form-title">用户注册</text>
        <text class="form-subtitle">创建一个新账号</text>
      </view>
      
      <view class="form-group register-form">
        <scroll-view scroll-y="true" class="register-scroll">
          <!-- 必填字段 -->
          <view class="input-group">
            <text class="input-label">用户名<text class="required">*</text></text>
            <input 
              type="text" 
              v-model="registerForm.username" 
              placeholder="5-16位英文字符" 
              class="input-field"
            />
            <text v-if="errors.username" class="error-text">{{ errors.username }}</text>
          </view>
          
          <view class="input-group">
            <text class="input-label">密码<text class="required">*</text></text>
            <input 
              type="password" 
              v-model="registerForm.password" 
              placeholder="5-16位英文字符" 
              class="input-field"
            />
            <text v-if="errors.password" class="error-text">{{ errors.password }}</text>
          </view>
          
          <view class="input-group">
            <text class="input-label">确认密码<text class="required">*</text></text>
            <input 
              type="password" 
              v-model="registerForm.confirmPassword" 
              placeholder="请再次输入密码" 
              class="input-field"
            />
            <text v-if="errors.confirmPassword" class="error-text">{{ errors.confirmPassword }}</text>
          </view>
          
          <view class="input-group">
            <text class="input-label">手机号<text class="required">*</text></text>
            <view class="phone-verify">
              <input 
                type="text" 
                v-model="registerForm.phone" 
                placeholder="11位手机号码" 
                class="input-field phone-input"
              />
              <button 
                class="verify-btn" 
                :disabled="verifyCountdown > 0"
                @tap="sendVerifyCode"
              >{{ verifyCountdown > 0 ? `${verifyCountdown}s` : '获取验证码' }}</button>
            </view>
            <text v-if="errors.phone" class="error-text">{{ errors.phone }}</text>
          </view>
          
          <view class="input-group">
            <text class="input-label">验证码<text class="required">*</text></text>
            <input 
              type="text" 
              v-model="registerForm.verifyCode" 
              placeholder="6位数字验证码" 
              class="input-field"
            />
            <text v-if="errors.verifyCode" class="error-text">{{ errors.verifyCode }}</text>
          </view>
          
          <view class="input-group">
            <text class="input-label">昵称<text class="required">*</text></text>
            <input 
              type="text" 
              v-model="registerForm.nickname" 
              placeholder="2-20个字符" 
              class="input-field"
            />
            <text v-if="errors.nickname" class="error-text">{{ errors.nickname }}</text>
          </view>
          
          <!-- 非必填字段 -->
          <view class="input-group">
            <text class="input-label">性别</text>
            <radio-group @change="handleGenderChange" class="radio-group">
              <label class="radio-label">
                <radio value="男" :checked="registerForm.gender === '男'" color="#A8BF8F" />
                <text>男</text>
              </label>
              <label class="radio-label">
                <radio value="女" :checked="registerForm.gender === '女'" color="#A8BF8F" />
                <text>女</text>
              </label>
            </radio-group>
          </view>
          
          <view class="input-group">
            <text class="input-label">年龄</text>
            <input 
              type="number" 
              v-model="registerForm.age" 
              placeholder="填写您的年龄" 
              class="input-field"
            />
          </view>
          
          <view class="input-group">
            <text class="input-label">本科院校</text>
            <input 
              type="text" 
              v-model="registerForm.university" 
              placeholder="填写您的本科院校" 
              class="input-field"
            />
          </view>
          
          <view class="input-group">
            <text class="input-label">专业</text>
            <input 
              type="text" 
              v-model="registerForm.major" 
              placeholder="填写您的专业" 
              class="input-field"
            />
          </view>
          
          <view class="input-group">
            <text class="input-label">目标院校</text>
            <input 
              type="text" 
              v-model="registerForm.targetSchool" 
              placeholder="填写您的目标院校" 
              class="input-field"
            />
          </view>
          
          <view class="input-group">
            <text class="input-label">目标专业</text>
            <input 
              type="text" 
              v-model="registerForm.targetMajor" 
              placeholder="填写您的目标专业" 
              class="input-field"
            />
          </view>
          
          <view class="input-group">
            <text class="input-label">每日学习时长</text>
            <view class="slider-container">
              <slider 
                :value="registerForm.dailyStudyHours" 
                min="1" 
                max="16" 
                step="0.5" 
                show-value 
                @change="handleStudyHoursChange" 
                activeColor="#A8BF8F"
              ></slider>
              <text class="slider-value">{{ registerForm.dailyStudyHours }}小时</text>
            </view>
          </view>
          
          <view class="agreement">
            <checkbox :checked="agreement" @tap="toggleAgreement" color="#A8BF8F" />
            <text>我已阅读并同意<text class="link">用户协议</text>和<text class="link">隐私政策</text></text>
          </view>
          
          <button class="submit-btn" @tap="handleRegister" :disabled="!agreement">注册</button>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'login',
      loginForm: {
        username: '',
        password: ''
      },
      registerForm: {
        username: '',
        password: '',
        confirmPassword: '',
        phone: '',
        verifyCode: '',
        nickname: '',
        gender: '男',
        age: '',
        university: '',
        major: '',
        targetSchool: '',
        targetMajor: '',
        dailyStudyHours: 8
      },
      errors: {
        username: '',
        password: '',
        confirmPassword: '',
        phone: '',
        verifyCode: '',
        nickname: ''
      },
      rememberMe: false,
      agreement: false,
      verifyCountdown: 0
    }
  },
  methods: {
    // 切换标签页
    switchTab(tab) {
      this.activeTab = tab
      // 重置错误信息
      this.resetErrors()
    },
    
    // 切换记住我
    toggleRememberMe() {
      this.rememberMe = !this.rememberMe
    },
    
    // 切换协议同意
    toggleAgreement() {
      this.agreement = !this.agreement
    },
    
    // 处理性别选择
    handleGenderChange(e) {
      this.registerForm.gender = e.detail.value
    },
    
    // 处理学习时长变化
    handleStudyHoursChange(e) {
      this.registerForm.dailyStudyHours = e.detail.value
    },
    
    // 发送验证码
    sendVerifyCode() {
      // 验证手机号
      if (!/^1\d{10}$/.test(this.registerForm.phone)) {
        this.errors.phone = '请输入有效的11位手机号码'
        return
      }
      
      // 开始倒计时
      this.verifyCountdown = 60
      const timer = setInterval(() => {
        this.verifyCountdown--
        if (this.verifyCountdown <= 0) {
          clearInterval(timer)
        }
      }, 1000)
      
      // 模拟发送验证码
      uni.showToast({
        title: '验证码已发送',
        icon: 'success'
      })
    },
    
    // 忘记密码
    forgotPassword() {
      uni.showToast({
        title: '请联系管理员重置密码',
        icon: 'none'
      })
    },
    
    // 处理登录
    handleLogin() {
      // 简单验证
      if (!this.loginForm.username || !this.loginForm.password) {
        uni.showToast({
          title: '请填写用户名和密码',
          icon: 'none'
        })
        return
      }
      
      // 模拟登录请求
      uni.showLoading({
        title: '登录中...'
      })
      
      setTimeout(() => {
        uni.hideLoading()
        
        // 模拟成功登录
        uni.showToast({
          title: '登录成功',
          icon: 'success',
          duration: 2000,
          success: () => {
            // 延迟跳转到首页
            setTimeout(() => {
              // 这里应该根据您的应用结构跳转到主页
              uni.reLaunch({
                url: '/pages/index/index'
              })
            }, 1500)
          }
        })
      }, 2000)
    },
    
    // 处理注册
    handleRegister() {
      // 验证表单
      if (!this.validateRegisterForm()) {
        return
      }
      
      // 模拟注册请求
      uni.showLoading({
        title: '注册中...'
      })
      
      setTimeout(() => {
        uni.hideLoading()
        
        // 模拟成功注册
        uni.showToast({
          title: '注册成功',
          icon: 'success',
          duration: 2000,
          success: () => {
            // 延迟切换到登录页
            setTimeout(() => {
              this.activeTab = 'login'
              // 将注册的用户名自动填入登录表单
              this.loginForm.username = this.registerForm.username
              this.resetRegisterForm()
            }, 1500)
          }
        })
      }, 2000)
    },
    
    // 验证注册表单
    validateRegisterForm() {
      this.resetErrors()
      let isValid = true
      
      // 验证用户名
      if (!this.registerForm.username) {
        this.errors.username = '用户名不能为空'
        isValid = false
      } else if (!/^[a-zA-Z0-9]{5,16}$/.test(this.registerForm.username)) {
        this.errors.username = '用户名必须为5-16位英文字符'
        isValid = false
      }
      
      // 验证密码
      if (!this.registerForm.password) {
        this.errors.password = '密码不能为空'
        isValid = false
      } else if (!/^[a-zA-Z0-9]{5,16}$/.test(this.registerForm.password)) {
        this.errors.password = '密码必须为5-16位英文字符'
        isValid = false
      }
      
      // 验证确认密码
      if (this.registerForm.password !== this.registerForm.confirmPassword) {
        this.errors.confirmPassword = '两次输入的密码不一致'
        isValid = false
      }
      
      // 验证手机号
      if (!this.registerForm.phone) {
        this.errors.phone = '手机号不能为空'
        isValid = false
      } else if (!/^1\d{10}$/.test(this.registerForm.phone)) {
        this.errors.phone = '请输入有效的11位手机号码'
        isValid = false
      }
      
      // 验证验证码
      if (!this.registerForm.verifyCode) {
        this.errors.verifyCode = '验证码不能为空'
        isValid = false
      } else if (!/^\d{6}$/.test(this.registerForm.verifyCode)) {
        this.errors.verifyCode = '验证码必须为6位数字'
        isValid = false
      }
      
      // 验证昵称
      if (!this.registerForm.nickname) {
        this.errors.nickname = '昵称不能为空'
        isValid = false
      } else if (this.registerForm.nickname.length < 2 || this.registerForm.nickname.length > 20) {
        this.errors.nickname = '昵称长度必须在2-20个字符之间'
        isValid = false
      }
      
      // 如果表单无效，滚动到第一个错误字段
      if (!isValid) {
        uni.showToast({
          title: '请检查表单信息',
          icon: 'none'
        })
      }
      
      return isValid
    },
    
    // 重置错误信息
    resetErrors() {
      this.errors = {
        username: '',
        password: '',
        confirmPassword: '',
        phone: '',
        verifyCode: '',
        nickname: ''
      }
    },
    
    // 重置注册表单
    resetRegisterForm() {
      this.registerForm = {
        username: '',
        password: '',
        confirmPassword: '',
        phone: '',
        verifyCode: '',
        nickname: '',
        gender: '男',
        age: '',
        university: '',
        major: '',
        targetSchool: '',
        targetMajor: '',
        dailyStudyHours: 8
      }
      this.agreement = false
    }
  }
}
</script>

<style>
.container {
  padding: 40rpx;
  min-height: 100vh;
  background-color: #f8f8f8;
}

/* 标签样式 */
.tabs {
  display: flex;
  margin-bottom: 40rpx;
  background-color: #ffffff;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 24rpx 0;
  font-size: 32rpx;
  color: #666666;
  position: relative;
}

.tab-item.active {
  color: #A8BF8F;
  font-weight: bold;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 25%;
  width: 50%;
  height: 6rpx;
  background-color: #A8BF8F;
  border-radius: 3rpx;
}

/* 表单容器 */
.form-container {
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 40rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.form-header {
  margin-bottom: 40rpx;
  text-align: center;
}

.form-title {
  font-size: 40rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 16rpx;
  display: block;
}

.form-subtitle {
  font-size: 28rpx;
  color: #999999;
  display: block;
}

.form-group {
  margin-bottom: 30rpx;
}

/* 输入框组样式 */
.input-group {
  margin-bottom: 30rpx;
}

.input-label {
  font-size: 28rpx;
  color: #666666;
  margin-bottom: 12rpx;
  display: block;
}

.required {
  color: #ff4d4f;
  margin-left: 4rpx;
}

.input-field {
  width: 100%;
  height: 80rpx;
  background-color: #f5f5f5;
  border-radius: 8rpx;
  padding: 0 24rpx;
  font-size: 28rpx;
  color: #333333;
  box-sizing: border-box;
}

.error-text {
  font-size: 24rpx;
  color: #ff4d4f;
  margin-top: 8rpx;
  display: block;
}

/* 手机验证区域 */
.phone-verify {
  display: flex;
}

.phone-input {
  flex: 1;
  margin-right: 20rpx;
}

.verify-btn {
  width: 220rpx;
  height: 80rpx;
  background-color: #A8BF8F;
  color: #ffffff;
  font-size: 26rpx;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.verify-btn[disabled] {
  background-color: #cccccc;
  color: #ffffff;
}

/* 记住我和忘记密码 */
.form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40rpx;
}

.remember-me {
  display: flex;
  align-items: center;
}

.remember-me text {
  font-size: 26rpx;
  color: #666666;
  margin-left: 10rpx;
}

.forgot-password {
  font-size: 26rpx;
  color: #A8BF8F;
}

/* 提交按钮 */
.submit-btn {
  width: 100%;
  height: 90rpx;
  background: linear-gradient(135deg, #B9D1A0 0%, #A8BF8F 100%);
  border-radius: 45rpx;
  color: #ffffff;
  font-size: 32rpx;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40rpx;
  border: none;
}

.submit-btn[disabled] {
  opacity: 0.6;
}

/* 第三方登录 */
.oauth-options {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.oauth-title {
  font-size: 26rpx;
  color: #999999;
  margin-bottom: 30rpx;
  position: relative;
}

.oauth-title::before,
.oauth-title::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 80rpx;
  height: 1px;
  background-color: #e0e0e0;
}

.oauth-title::before {
  left: -100rpx;
}

.oauth-title::after {
  right: -100rpx;
}

.oauth-icons {
  display: flex;
  justify-content: center;
}

.oauth-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 20rpx;
}

.icon {
  font-size: 36rpx;
}

/* 注册表单滚动区域 */
.register-form {
  height: 800rpx;
}

.register-scroll {
  height: 100%;
}

/* 单选框组 */
.radio-group {
  display: flex;
}

.radio-label {
  display: flex;
  align-items: center;
  margin-right: 40rpx;
}

.radio-label text {
  font-size: 28rpx;
  color: #666666;
  margin-left: 10rpx;
}

/* 滑块容器 */
.slider-container {
  margin-top: 20rpx;
}

.slider-value {
  font-size: 26rpx;
  color: #A8BF8F;
  margin-top: 10rpx;
  text-align: center;
  display: block;
}

/* 协议同意 */
.agreement {
  display: flex;
  align-items: center;
  margin: 30rpx 0;
}

.agreement text {
  font-size: 26rpx;
  color: #666666;
  margin-left: 10rpx;
}

.link {
  color: #A8BF8F;
}
</style>